<template>
  <div>
    <div class="dialg-setmeal-label">
      <span>{{label}}</span>
    </div>
    <el-form label-width="100px" label-position="right" :model="formdata" :rules="rules" ref="form">
      <el-form-item label="手机号码：">
        <el-input v-model="formdata.mobile" style="width: 88%;"></el-input>
      </el-form-item>
      <el-form-item label="验证码：" prop="validateCode">
        <el-input v-model="formdata.validateCode" style="width: 60%;"></el-input>
        <el-button type="primary" style="width: 28%;" v-if="clock>0" disabled>{{clock}}秒</el-button>
        <el-button type="primary" style="width: 28%;" v-else @click="handleGetValidateCode">获取验证码</el-button>
      </el-form-item>
    </el-form>
    <div class="dialog-button">
      <el-button size="small" @click="handleCancel">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit">提交</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: ''
    },
    onGetCode: {
      type: Function,
      default: () => {}
    },
    onSubmitResult: {
      typeof: Function,
      default: () => {}
    },
    oncancel: {
      type: Function,
      default: () => {}
    }
  },
  data () {
    return {
      rules: {
        validateCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      },
      formdata: {
        mobile: '',
        validateCode: ''
      },
      clock: 0
    }
  },
  methods: {
    setClock() {
      this.clock = 60
      this.countDown()
    },
    countDown() {
      if (this.clock > 0) {
        this.clock = this.clock - 1
        setTimeout(() => {
          this.countDown()
        }, 1000)
      }
    },
    handleGetValidateCode() {
      this.setClock()
      this.onGetCode(this.formdata.mobile)
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          this.$message.error('请完整填写信息!')
        } else {
          this.onSubmitResult(this.formdata.mobile, this.formdata.validateCode)
          this.formdata.mobile = ''
          this.formdata.validateCode = ''
        }
      })
    },
    handleCancel() {
      this.oncancel()
      this.formdata.mobile = ''
      this.formdata.validateCode = ''
    }
  }
}
</script>

<style>
.dialg-setmeal-label {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
.dialog-button {
  margin-left: 65%;
}
</style>
